<script setup lang="ts" name="refund-manage">
import { activityV1Create, activityV1Get, activityV1Update } from '@fl/api/city-service'
import { useRoute, useRouter } from 'vue-router'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { onMounted } from 'vue'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()
const formRef = ref()
const formData = reactive({
    activityName: '',
    address: '',
    activityImg: '',
    description: '',
    timeRange: [],
})
const rules = reactive<any>({
    timeRange: [
        { trigger: 'blur', required: true, validator: validatePass },
    ],
    activityName: [{ message: '请输入活动名称', required: true, trigger: 'blur' }],
    address: [{ message: '请输入地址', required: true, trigger: 'blur' }],
    activityImg: [{ message: '请上传封面', required: true, trigger: 'blur' }],
    description: [{ message: '请输入活动介绍', required: true, trigger: 'blur' }],
})
// 校验调用
function validatePass(rule: any, value: any, callback: any) {
    // console.log('validatePass', value)
    if (Array.isArray(value) && value.length === 2) {
        callback()
    }
    else {
        callback(new Error('请选择活动时间'))
    }
}

function cancel() {
    router.back()
}
function commit() {
    console.log('formRef', formRef.value, formData)
    formRef.value?.validate((valid, _) => {
        if (valid) {
            let _func = activityV1Create
            if (route.query.id) {
                _func = activityV1Update
            }
            const _formData: any = Object.assign({
                startTime: `${formData.timeRange[0]} 00:00:00`,
                endTime: `${formData.timeRange[1]} 00:00:00`,
            }, formData)
            delete _formData.timeRange
            _func(_formData).then((res) => {
                console.log('res', res)
                if (res) {
                    ElMessage.success('操作成功')
                    router.back()
                }
                else {
                    ElMessage.warning(res.msg)
                }
            })
        }
    })
}

onMounted(() => {
    if (route.query.id) {
        activityV1Get(route.query.id).then((res) => {
            // console.log('res', res)
            const timeRange = [dayjs(res.startTime).format('YYYY-MM-DD'), dayjs(res.endTime).format('YYYY-MM-DD')]
            Object.assign(formData, res, {
                timeRange,
            })
        })
    }
})
</script>

<template>
    <ElCard class="mb-20">
        <ElForm ref="formRef"
                :model="formData"
                :rules="rules"
                label-width="120"
        >
            <ElRow>
                <ElCol :span="24">
                    <ElButton class="mb-20"
                              @click="cancel"
                    >
                        <ElIcon mr8
                                style="font-size: 19px"
                        >
                            <Back />
                        </ElIcon> 返回列表
                    </ElButton>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="活动名称"
                                prop="activityName"
                    >
                        <ElInput v-model="formData.activityName"
                                 placeholder="请输入活动名称"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="活动时间"
                                prop="timeRange"
                    >
                        <el-form-item class="append"
                                      prop="timeRange"
                        >
                            <el-date-picker v-model="formData.timeRange"
                                            :disabled="false"
                                            type="daterange"
                                            start-placeholder="开始时间"
                                            end-placeholder="结束时间"
                                            format="YYYY-MM-DD"
                                            value-format="YYYY-MM-DD"
                            />
                        </el-form-item>
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="活动地址"
                                prop="address"
                    >
                        <ElInput v-model="formData.address"
                                 placeholder="请输入地址名称"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="12">
                    <ElFormItem label="封面"
                                prop="activityImg"
                    >
                        <UpdatedOss v-model="formData.activityImg"
                                    accept=".png,.jpg,.jpeg"
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="18">
                    <ElFormItem label="活动介绍"
                                prop="description"
                    >
                        <ElInput v-model="formData.description"
                                 maxlength="1000"
                                 show-word-limit
                                 :autosize="{ minRows: 3, maxRows: 5 }"
                                 type="textarea"
                                 placeholder="请输入内容"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="24"
                       style="text-align: center;margin-top:40px"
                >
                    <ElButton @click="cancel">
                        取消
                    </ElButton>

                    <ElButton type="primary"
                              style="margin-left:20px"
                              @click="commit"
                    >
                        提交
                    </ElButton>
                </ElCol>
            </ElRow>
        </ElForm>
        <!-- <PlusForm v-model="form"
                  :columns="schema"
                  :row-props="{ gutter: 20 }"
                  label-width="80"
                  label-position="right"
        >
            <template #footer>
                <div class="ml-auto">
                    <ElButton type="primary"
                              @click="search"
                    >
                        查询
                    </ElButton>

                    <ElButton @click="reset">
                        重置
                    </ElButton>
                </div>
            </template>
        </PlusForm> -->
    </ElCard>
</template>

<style lang="less" scoped></style>
